<template>
  <div :style="styles" class="float">
    <span style="text-align: center;display:block;" class="font1">

      <el-tag v-if="title != ''" type="primary"> {{ title }}</el-tag>
      <el-button icon="el-icon-refresh" size="small" type="success" @click="format">美化</el-button>
      <el-button
        v-clipboard:copy="value"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError"
        size="small"
        type="success"
        icon="el-icon-document-copy"
      >点击复制</el-button>
    </span>
    <editor
      v-model="value"
      lang="json"
      :options="editorOptions"
      theme="chrome"
      :height="height"
      @init="editorInit"
    />
  </div>
</template>
<script>
export default {
  name: 'Json',
  props: {
    styles: {
      type: String,
      default: 'width: 50%'
    },
    read: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Object,
      default: {}
    },
    pointOut: {
      type: Array,
      default: []
    },
    height: {
      type: String,
      default: '600'
    },
    fontSize: {
      type: String,
      default: '18'
    }
  },
  data() {
    return {
      ed: null,
      editorOptions: {
        // 设置代码编辑器的样式
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
        tabSize: 2,
        fontSize: Number(this.fontSize),
        showPrintMargin: false // 去除编辑器里的竖线
      }
    }
  },
  watch: {
    value(v) {
      this.$emit('getValue', v)
    }
  },
  destroyed() {
    this.ed = null
  },
  created() {
  },
  methods: {
    format() {
      try {
        const value = this.ed.getValue()
        const tmp = JSON.parse(value)
        this.ed.setValue(JSON.stringify(tmp, null, '\t'))
      } catch (e) {
        console.log(e)
      }
    },
    setCompletions(editor, session, pos, prefix, callback) {
      if (prefix.length === 0) {
        return callback(null, [])
      } else {
        return callback(null, this.pointOut)
      }
    },
    editorInit: function(ed) {
      require('brace/theme/chrome')
      require('brace/ext/language_tools')
      require('brace/mode/yaml')
      require('brace/ext/searchbox')
      require('brace/ext/emmet')
      require('brace/theme/monokai')
      require('brace/mode/json')
      require('brace/mode/less')
      require('brace/snippets/json')
      if (this.read) {
        ed.setReadOnly(true)
      }
      const that = this
      ed.completers = [{
        getCompletions: function(editor, session, pos, prefix, callback) {
          that.setCompletions(editor, session, pos, prefix, callback)
        }
      }]
      this.ed = ed
    },
    onCopy(e) { 　　 // 复制成功
      this.$message({
        offset: 60,

        message: '复制成功！',
        type: 'success'
      })
    },
    onError(e) {　　 // 复制失败
      this.$message({
        offset: 60,

        message: '复制失败！',
        type: 'error'
      })
    }
  }
}
</script>
<style scoped>
  .float {
    float: left;
  }

  .font1 {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    color: green;
  }
</style>
